<template>
  <div class="t-body">
    <div class="t-header">
      <div>
        <span>项目名称</span>
        <span>所属企业</span>
        <span>项目地址</span>
        <span class="width15">单价(元)</span>
        <span class="width15">已完成钻孔</span>
        <span class="width10">总钻孔数</span>
        <span class="width15">开始时间</span>
        <span class="width10">项目状态</span>
      </div>
    </div>
    <vue-seamless-scroll v-if="tableList.length> 0" :data="tableList" :style="{height: height}" :class-option="optionHover" class="seamless-warp">
      <ul ref="con1" class="con1">
        <li v-for="(item, index) in tableList" :key="index">
          <el-tooltip v-if="item.proName" class="item" effect="dark" :open-delay="500" :content="item.proName" placement="top-start">
            <span class="to-link" @click="getProDetail(item.proId,item.proStatus)">{{ item.proName }}</span>
          </el-tooltip>
          <span v-else>{{ item.proName }}</span>

          <el-tooltip v-if="item.companyName" class="item" effect="dark" :open-delay="500" :content="item.companyName" placement="top-start">
            <span>{{ item.companyName }}</span>
          </el-tooltip>
          <span v-else>{{ item.companyName }}</span>

          <el-tooltip v-if="item.proAddress" class="item" effect="dark" :open-delay="500" :content="item.proAddress" placement="top-start">
            <span>{{ item.proAddress }}</span>
          </el-tooltip>
          <span v-else>{{ item.proAddress }}</span>

          <span class="width15"><i v-if="item.proName">{{ contractAmount(item.contractPrice) }}</i></span>
          <span class="width15">{{ item.finishWorkload }}</span>
          <span class="width10">{{ item.workload }}</span>
          <span class="width15">{{ item.startTime }}</span>
          <span class="width10">{{ proStatus(item.proStatus) }}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
    <div v-else class="no-data">
      <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'WarnProject',
  props: {
    tableList: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default() {
        return '220px'
      }
    }
  },
  data() {
    return {
      animate: false,
      needNum: 7
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.55, // 数值越大速度滚动越快
        limitMoveNum: this.needNum + 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    ...mapState({ ProStatusList: state => state.basicInfo.ProStatusList }),
    proStatus() {
      return status => this.selectDictLabel(this.ProStatusList, status)
    },
    contractAmount() {
      return contractAmount => this.divideMoney(contractAmount, 2)
    }
  },
  watch: {
    tableList: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length > 0) {
          this.needNum = Math.floor(parseInt(this.height) / 36)
          this.addTaleData(val.length, this.needNum)
        }
      }

    }
  },
  methods: {
    getProDetail(id, proStatus) {
      if (!id) return
      this.$store.commit('basicInfo/SET_ProId', id)
      this.$store.commit('basicInfo/SET_ProStatus', proStatus)
      this.$router.push({ path: '/newProject/project-detail' })
    },
    // 补空白行
    addTaleData(listDataLength, needNum) {
      if (listDataLength < needNum) {
        const arr = {}
        this.tableList.push(arr)
        this.addTaleData()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.t-body{
  .t-header{
    div{
      span{
        width: 25%;
        &:first-child{
          width: 50%;
        }
        &:nth-child(4),&:nth-child(5){
          text-align: center;
        }
        &:last-child{
          border-right: none;
        }
        &.width10{
          width: 10%;
          text-align: center;
        }
        &.width15{
          width: 15%;
          text-align: center;
        }
      }
    }
  }
  .seamless-warp{
    height: 220px;
    .con1 {
      li{
        span{
          i{
            font-style: normal;
          }
          width: 25%;
          &:first-child{
            width: 50%;
          }
          &:nth-child(4),&:nth-child(5){
            text-align: center;
          }
          &:last-child{
            border-right: none;
          }
          &.width10{
            width: 10%;
            text-align: center;
          }
          &.width15{
            width: 15%;
            text-align: center;
          }
        }
      }
    }
  }
}

</style>
